<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <!--<div class="address">
        <div>
          <p>您当前所在位置</p>
          <router-link to="/" class="link">订单详细-面料</router-link>
        </div>
      </div>-->
      <div class="roder-details">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="订单基本信息">
            <div class="info">
              <h3 class="title">订单信息</h3>
              <div class="list">
                <div class="list-div">

                  <div>
                    <p>门店名称</p>
                    <span>{{ fabricOrderDetail.storeName }}</span>
                  </div>

                  <div>
                    <p>下单员工</p>
                    <span>{{ fabricOrderDetail.empName }}</span>
                  </div>

                  <div>
                    <p>员工电话</p>
                    <span>{{ fabricOrderDetail.empPhone }}</span>
                  </div>

                  <div>
                    <p>订单编号</p>
                    <span style="overflow:hidden">{{ fabricOrderDetail.orderSn }}</span>
                  </div>
                  <!--<div>
                        <p>门店编号</p>
                        <span>{{ fabricOrderDetail.storeCode }}</span>
                      </div>-->
                  <div>
                    <p>创建时间</p>
                    <span>{{ fabricOrderDetail.createTime }}</span>
                  </div>

                  <div v-if="fabricOrderDetail.payTime!='' && fabricOrderDetail.payTime!=null">
                    <p>支付时间</p>
                    <span>{{ fabricOrderDetail.payTime }}</span>
                  </div>

                  <!--                <div>
                                    <p>订单金额</p>
                                    <span>{{ fabricOrderDetail.orderMoney }}元</span>
                                  </div>-->
                  <div>
                    <p>快递方式</p>
                    <span>{{ fabricOrderDetail.courierName }}</span>
                  </div>
                  <!--<div>
                    <p>包装方式</p>
                    <span>{{fabricOrderDetail.packaging}}</span>
                  </div>-->
                  <!--                <div>
                                    <p>地址类型</p>
                                    <span>{{ fabricOrderDetail.addressType }}</span>
                                  </div>-->
                  <div>
                    <p>客户编号</p>
                    <span>{{ fabricOrderDetail.companyCode }}</span>
                  </div>
                  <div>
                    <p>客户名称</p>
                    <span>{{ fabricOrderDetail.companyName }}</span>
                  </div>
                  <div>
                    <p>收货人</p>
                    <span>{{ fabricOrderDetail.name }}</span>
                  </div>
                  <div>
                    <p>收货电话</p>
                    <span>{{ fabricOrderDetail.phone }}</span>
                  </div>
                  <div>
                    <p>收货地址</p>
                    <span>{{ fabricOrderDetail.address }}</span>
                  </div>
                  <!--                <div>
                                    <p>支付方式</p>
                                    <span v-if="fabricOrderDetail.applyType==0">支付宝</span>
                                    <span v-if="fabricOrderDetail.applyType==1">微信</span>
                                    <span v-if="fabricOrderDetail.applyType==4">余额</span>
                                    <span v-if="fabricOrderDetail.applyType==5">月结</span>
                                  </div>-->
                </div>

              </div>
              <h3 class="title">面料信息</h3>
              <div class="list" v-for="(item,key) in cartDeatil" :key="item.id">
                <div class="list-div">
                  <div>
                    <p>面料编号</p>
                    <span>{{ item.fabricInfo.fabricCode }}</span>
                  </div>
                  <div>
                    <p style="justify-content: center;padding-left: 0px;">供应商面料编号</p>
                    <span>{{ item.fabricInfo.gysfabriccode }}</span>
                  </div>
                  <div>
                    <p>面料成分</p>
                    <span>{{ item.fabricInfo.fabricContent }}</span>
                  </div>

                  <div>
                    <p>面料纱支</p>
                    <span>{{ item.fabricInfo.fabricShazhi }}</span>
                  </div>
                  <div>
                    <p>面料克重</p>
                    <span>{{ item.fabricInfo.fabricWeight }}g</span>
                  </div>
                  <!--<div>
                    <p>花型</p>
                    <span>人字</span>
                  </div>-->
                  <div>
                    <p>颜色</p>
                    <span>{{ item.fabricInfo.fabriceColor }}</span>
                  </div>
                  <div>
                    <p>样本</p>
                    <span>{{ item.fabricInfo.fabricSample }}</span>
                  </div>
                  <!--                <div>
                                    <p>幅宽</p>
                                    <span>{{ item.fabricInfo.fabricWidth }}</span>
                                  </div>-->
                  <div>
                    <p>门幅</p>
                    <span>{{ item.fabricInfo.menfu }}</span>
                  </div>
                  <div>
                    <p>季节</p>
                    <span>{{ item.fabricInfo.season }}</span>
                  </div>
                </div>
                <div>
                  <p></p>
                  <label>
                    <p>备注信息：</p>
                    <el-input type="textarea" style="width:400px" :autosize="{ minRows: 2, maxRows: 4}" disabled
                              :value="item.remark"></el-input>
                  </label>
                </div>
              </div>

              <h3 class="title">订单费用明细</h3>
              <h4 class="title2">面料费用</h4>
              <div class="table-css">

                <a-table class="table1" lign="center" :columns="cartlistcolumns" :data-source="cartDeatil"
                         :pagination="false">
                  <a slot="k7" slot-scope="text" style="color:#C49D18">{{ text }}</a>
                  <a slot="k6" slot-scope="text" style="color:#C49D18">{{ text }}</a>
                  <a slot="k8" slot-scope="text" style="color:#C49D18">{{ text }}</a>
                </a-table>
              </div>

              <h5 class="price">合计金额：<span>{{ fabricOrderDetail.orderMoney }} 元</span></h5>
              <h5 v-if="fabricOrderDetail.priorPrice!=0" class="price">调价前金额：<span>{{
                  fabricOrderDetail.priorPrice
                }}元</span></h5>
              <h5 v-if="fabricOrderDetail.priorPrice!=0" class="price">原总金额：<span>{{
                  fabricOrderDetail.firstPrice
                }}元</span></h5>
              <h5
                v-if="fabricOrderDetail.status!=0 && fabricOrderDetail.status!=-1 && fabricOrderDetail.deductionPay!=0"
                class="price">抵扣额度支付：<span>{{ fabricOrderDetail.deductionPay }} 元</span></h5>
              <h5 v-if="fabricOrderDetail.status!=0 && fabricOrderDetail.status!=-1 && fabricOrderDetail.monthPay!=0"
                  class="price">月结剩余额度支付：<span>{{ fabricOrderDetail.monthPay }} 元</span></h5>
              <h5 v-if="fabricOrderDetail.status!=0 && fabricOrderDetail.status!=-1 && fabricOrderDetail.balancePay!=0"
                  class="price">余额支付：<span>{{ fabricOrderDetail.balancePay }} 元</span></h5>
              <div class="btns">
                <div class="btn1" v-if="fabricOrderDetail.status==0" @click="showModal">调价</div>
              </div>

              <!--驳回的弹框-->
              <a-modal
                title="订单驳回"
                v-model:visible="visible0"
                :confirm-loading="confirmLoading"
                @ok="delOrder"
              >
                驳回原因：
                <a-input v-model="jieRemark"/>
              </a-modal>

              <!--调价弹框-->
              <div>
                <a-modal
                  title="订单调价"
                  v-model:visible="visible"
                  :confirm-loading="confirmLoading"
                  @ok="changePrice"
                >
                  <lable>调价金额：</lable>
                  <a-input-number style="width: 50%" v-model="tiaoPrice" :min="0"/>
                  <br/>
                  <br/>
                  <lable>调价备注：</lable>
                  <a-input style="width: 50%" v-model="tremark"/>
                </a-modal>
              </div>

              <h3 class="title">订单备注</h3>
              <textarea v-model="fabricOrderRemark" class="text1"
                        style="color: rgb(153, 153, 153);"></textarea>

              <div class="btns">
                <!--<div class="btn1" @click="payOrder" v-if="fabricOrderDetail.status==1">立即接单</div>-->
                <div class="btn1" @click="openDelWindow"
                     v-if="fabricOrderDetail.status>=1 && fabricOrderDetail.status!=9 && fabricOrderDetail.status!=5">驳回
                </div>
                <div class="btn1" @click="$router.go(-1)">返回</div>
              </div>
            </div>
          </a-tab-pane>

          <a-tab-pane key="2" tab="订单状态跟踪">
            <div class="info">
              <h3 class="title">订单状态跟踪</h3>
              <div v-for="(item,key) in orderTrackingList" :key="item.id">
                <h4 class="title10">{{ item.createTime }}</h4>
                <div class="text10">
                  <p>订单状态:</p>
                  <div>
                    <span v-if="item.orderStatus==null">未支付</span>
                    <span v-if="item.orderStatus=='0'">未支付</span>
                    <span v-if="item.orderStatus=='1'">已支付</span>
                    <span v-if="item.orderStatus=='2'">申请售后</span>
                    <span v-if="item.orderStatus=='3'">已接单</span>
                    <span v-if="item.orderStatus=='4'">已发货</span>
                    <span v-if="item.orderStatus=='5'">已完成</span>
                    <span v-if="item.orderStatus=='6'">备库</span>
                    <span v-if="item.orderStatus=='7'">驳回</span>
                    <span v-if="item.orderStatus=='8'">已取消</span>
                  </div>
                </div>
                <div class="text10" v-show="item.orderStatus=='4'">
                  <p>物流信息:</p>
                  <div>
                    <span>{{ item.logisticsSn }}</span>
                  </div>
                </div>
                <div class="text10">
                  <p>订单事件:</p>
                  <div>
                    <span>{{ item.thing }}</span>
                  </div>
                </div>
                <div class="text10">
                  <p>事件备注:</p>
                  <div>
                    <span>{{ item.remark }}</span>
                  </div>
                </div>
              </div>

            </div>
          </a-tab-pane>

          <a-tab-pane key="3" tab="售后记录跟踪">
            <div class="info">
              <h4 class="title1" style="font-weight: 700;width: auto;">售后订单列表</h4>
              <div class="table-css">
                <a-table class="table1" :row-selection="rowSelection" lign="center" :columns="afterTitle"
                         :loding="true"
                         :pagination="pagination"
                         @change="handleTableChange"
                         :data-source="afterlist">
                <span slot="k6" slot-scope="text,record">
                  <router-link
                    :to="{path:'/orderCenter/AfterSaleFabric',query:{id:record.id,afterCode:record.afterCode}}"
                    style="color:#C49D18">查看详情
                  </router-link>
                  <a-popconfirm style="margin-left: 8px" title="确定完结吗?"
                                @confirm="() => afterOK(record.id)">
                    <a style="color:#C49D18">完成售后</a>
                  </a-popconfirm>
                </span>
                  <!--<a slot="k6" slot-scope="text" style="color:#C49D18">查看详情</a>-->
                </a-table>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </a-card>
</template>

<script>

// 售后列表表头
const afterTitle = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 60,
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '售后单号',
    align: "center",
    dataIndex: 'afterCode'
  },
  {
    title: '更新时间',
    align: "center",
    dataIndex: 'createTime'
  },
  {
    title: '售后类型',
    align: "center",
    dataIndex: 'afterSalesType',
    customRender: function (text) {
      if (text == '0') {
        return '退货'
      } else if (text == '1') {
        return '换货'
      } else if (text == '2') {
        return '返修'
      } else if (text == '3') {
        return '重做'
      }
    }
  },
  {
    title: '状态',
    align: "center",
    dataIndex: 'afterstatus',
    customRender: function (text) {
      if (text == '0') {
        return '已提交'
      } else if (text == '1') {
        return '已驳回'
      } else if (text == '2') {
        return '售后中'
      } else if (text == '3') {
        return '已完成'
      } else if (text == '4') {
        return '已发货'
      } else if (text == '5') {
        return '平台已收货'
      }
    },
  },
  {
    title: '操作',
    align: "center",
    scopedSlots: {
      customRender: 'k6'
    }
  }
];

// 面料价格列表
const cartlistcolumns = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 60,
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '面料编号',
    align: "center",
    dataIndex: 'fabricInfo.fabricCode'
  },
  {
    title: '米数',
    align: "center",
    dataIndex: 'buyNumber'
  },
  {
    title: '阶梯价',
    align: "center",
    dataIndex: 'fabricInfo.fabricPrice'
  },
  /*{
      title: '阶梯折扣',
      align: "center",
      dataIndex: 'orderSn'
  },*/
  {
    title: '客户折扣',
    align: "center",
    dataIndex: 'fabricInfo.kehuzk',
    customRender: function (text) {
      if (text == '1') {
        return '100%'
      } else {
        if (Number(text) == 0) {
          return '100%'
        }
        return (Number(text) * 100) + "%"
      }
    }
  },
  {
    title: '折后单价',
    align: "center",
    dataIndex: 'fabricInfo.afterPrice'
  },
  {
    title: '总金额',
    align: "center",
    dataIndex: 'totalAmount'
  },
]
const columns1 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
},
  {
    title: '面料',
    dataIndex: 'k2',
    key: 'k2',
  },
  {
    title: '米数',
    dataIndex: 'k3',
    key: 'k3',
  },
  {
    title: '标准单价',
    key: 'k4',
    dataIndex: 'k4'
  },
  {
    title: '阶梯折扣',
    key: 'k5',
    dataIndex: 'k5'
  },
  {
    title: '客户折扣',
    key: 'k6',
    dataIndex: 'k6',
    scopedSlots: {
      customRender: 'k6'
    },
  },
  {
    title: '折后单价',
    key: 'k7',
    dataIndex: 'k7',
    scopedSlots: {
      customRender: 'k7'
    },
  },
  {
    title: '总金额',
    key: 'k8',
    dataIndex: 'k8',
    scopedSlots: {
      customRender: 'k8'
    },
  },
];
const columns7 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
},
  {
    title: '售后单号',
    dataIndex: 'k2',
    key: 'k2',
  },
  {
    title: '售后类型',
    dataIndex: 'k3',
    key: 'k3',
  },
  {
    title: '申请时间',
    key: 'k4',
    dataIndex: 'k4'
  },

  {
    title: '状态',
    key: 'k5',
    dataIndex: 'k5',
    scopedSlots: {
      customRender: 'k5'
    },
  },
  {
    title: '操作',
    key: 'k6',
    dataIndex: 'k6',
    scopedSlots: {
      customRender: 'k6'
    },
  }
];
const columns2 = [{
  dataIndex: 'k1',
  key: 'k1',
  title: '序号',
},
  {
    title: '品类',
    dataIndex: 'k2',
    key: 'k2',
  },
  {
    title: '性别',
    dataIndex: 'k3',
    key: 'k3',
  },
  {
    title: '标准单价',
    key: 'k4',
    dataIndex: 'k4'
  },
  {
    title: '阶梯折扣',
    key: 'k5',
    dataIndex: 'k5'
  },
  {
    title: '客户折扣',
    key: 'k6',
    dataIndex: 'k6',
    scopedSlots: {
      customRender: 'k6'
    },
  },
  {
    title: '折后单价',
    key: 'k7',
    dataIndex: 'k7',
    scopedSlots: {
      customRender: 'k7'
    },
  },
  {
    title: '总金额',
    key: 'k8',
    dataIndex: 'k8',
    scopedSlots: {
      customRender: 'k8'
    },
  },
];
const data1 = [{
  k1: '1',
  k2: '23341964AQ',
  k3: '2020-06-01',
  k4: '2264AA',
  k5: '40米',
  k6: '80%',
  k7: '304元/米',
  k8: '7600元'
}]
const data5 = [{
  k1: '1',
  k2: 'UOSL1334',
  k3: '返修',
  k4: '2020-06-10',
  k5: '等待审核',
  k6: '查看售后状态'
}]
// @ is an alias to /src
import locale from 'ant-design-vue/lib/locale-provider/zh_CN'
import {getAction} from "../../api/manage";

export default {
  created() {
    this.getFabricDetail()
    this.Tracking()
    this.getAfterList()
  },
  name: 'OrderDetalisFabric',
  data() {
    return {
      jieRemark: '', // 驳回的原因
      visible0: false, // 驳回的弹窗是否显示
      // 调价弹窗
      tremark: '',// 调价的备注
      visible: false,
      confirmLoading: false,
      tiaoPrice: '',
      // 分页
      pagination: {
        current: '',
        total: 0,
        pageSize: 10,//每页中显示10条数据
      },
      fabricOrderDetail: {},// 面料订单详情
      cartDeatil: [],// 面料订单中的购物车列表
      fabricOrderRemark: '', // 面料订单备注
      orderTrackingList: [], // 订单跟踪列表
      afterTitle, // 售后列表表头
      afterlist: [], // 售后订单列表
      url: {
        afterOK: '/orderCenter/afterOK', // 售后完成
        fabricDetail: "/cart/getFabricOrderDetail", // 面料订单详情
        rejectedOrder: "/orderCenter/rejectedOrder", // 驳回
        orderNow: "/orderCenter/orderNow", // 立即接单
        getFabricOrderTracking: "/orderCenter/getFabricOrderTracking", // 面料订单状态跟踪
        pricing: "/orderCenter/pricing", // 订单调价
        listTeamAfter: '/orderCenter/listTeamAfter' // 售后订单列表
      },
      cartlistcolumns,// 面料列表的数据
      columns1,
      columns7,
      columns2,
      data1,
      data5,
      locale,
      selectedRowKeys: [],
      tab1Data: [{
        id: 1,
        name: '无需试穿'
      },
        {
          id: 2,
          name: '半成品试穿'
        },
        {
          id: 3,
          name: '毛坯半成品试穿'
        },
      ],
      tab1Idx: -1,
      tab2Data: [{
        id: 1,
        name: '常规',
        hoveName: '7个工作日'
      },
        {
          id: 2,
          name: '加急',
          hoveName: '5个工作日200元'
        },
        {
          id: 3,
          name: '特急',
          hoveName: '3个工作日400元'
        },
      ],
      tab2Idx: -1,
      tab3Data: [{
        id: 1,
        name: '来款/样式'
      },
        {
          id: 2,
          name: '改款'
        },
      ],
      tab3Idx: -1,
      tab4Data: [{
        id: 1,
        name: '派定制'
      },],
      tab4Idx: -1,
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  methods: {

    /**
     * 售后完成
     */
    afterOK(id) {
      getAction(this.url.afterOK, {"id": id}).then(res => {
        if (res.code == '0') {
          this.getAfterList()
          this.$message.success("操作成功")
        } else {
          this.$message.success("操作失败")
        }
      })
    },

    // 调价弹窗相关方法
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    // 其他的方法
    selectTab: function (dataStr, i) {
      this[dataStr] = i
    },
    // 获取面料订单详情
    getFabricDetail() {
      getAction(this.url.fabricDetail, {
        'orderSn': this.$route.query.order, // 选中的订单编号
      }).then(res => {
        if (res.code == '0') {
          this.fabricOrderDetail = res.data
          this.cartDeatil = res.data.cartInfoList
          this.fabricOrderRemark = res.data.remark
        }
      })
    },
    // 订单调价
    changePrice() {
      getAction(this.url.pricing, {
        'orderType': 3,
        'orderSn': this.$route.query.order,
        'price': this.tiaoPrice,
        'remark': this.tremark
      }).then(res => {
        if (res.code == '200') {
          this.visible = false
          this.$message.success("调价成功")
          this.getFabricDetail()
          this.Tracking()
        }
      })
    },

    /**
     * 打开驳回的弹窗
     */
    openDelWindow() {
      this.visible0 = true
    },

    // 取消面料订单（驳回）
    delOrder() {
      this.visible0 = false
      getAction(this.url.rejectedOrder, {
        'orderType': 3,
        'orderID': this.fabricOrderDetail.id,
        'remark': this.jieRemark
      }).then(res => {
        if (res.code == '0') {
          this.$message.success("驳回成功")
          this.$router.go(-1)
        } else {
          this.$message.warning("驳回失败")
        }
      })
    },

    // 立即接单（改变订单状态为已结单）
    payOrder() {
      getAction(this.url.orderNow, {
        'orderSn': this.$route.query.order,
      }).then(res => {
        if (res.code == '200') {
          this.$message.success("接单成功！")
          this.$router.go(-1)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },


    // 订单状态跟踪
    Tracking() {
      getAction(this.url.getFabricOrderTracking, {
        'orderType': 3,
        'orderSn': this.$route.query.order
      }).then(res => {
        if (res.code == '0') {
          this.orderTrackingList = res.data
        }
      })
    },

    // 获取团订订单售后记录列表
    getAfterList() {
      getAction(this.url.listTeamAfter, {
        'orderSn': this.$route.query.order,
        'orderType': 3
      }).then(res => {
        if (res.code == '0') {
          this.afterlist = res.data.records
          this.pagination.total = res.data.total
          this.pagination.current = res.data.current
        }
      })
    },

    // 分页器方法
    handleTableChange(page, pageSize) {
      getAction(this.url.listTeamAfter, {
        'pageNo': page.current,
        'pageSize': page.current.pageSize,
        'orderSn': this.$route.query.order,
        'orderType': 3
      }).then(res => {
        if (res.code == '0') {
          this.afterlist = res.data.records
          this.pagination.total = res.data.total
          this.pagination.current = res.data.current
        }
      })
    },

  }
}
</script>

<style scoped lang="less">
.roder-details {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 20px 35px;

  .info {
    padding-top: 30px;
    padding-left: 26px;
    position: relative;
    min-height: 800px;


    .text11 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        h5 {
          color: #333;
          font-size: 15px;
          font-weight: 500;

          display: block;
        }

        p {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          display: block;
        }
      }
    }

    .title10 {
      color: #333;
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 20px;
    }

    .text10 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        span {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          &.b {
            font-weight: 500;
          }

          display: block;
        }
      }
    }

    .table-css {
      position: relative;

      .bz {
        width: 447px;
        height: 63px;
        background: inherit;
        background-color: rgba(255, 221, 202, 1);
        position: absolute;
        right: 0px;
        top: -63px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

        p {
          width: 100%;
          color: rgb(251, 8, 8);
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 0px;
          line-height: 16px;
        }
      }
    }

    .btns {
      margin-top: 25px;
      margin-bottom: 60px;
      display: flex;

      .btn1 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(81, 81, 81, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(236, 227, 0);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .btn2 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(244, 244, 244, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(104, 104, 104);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }
    }


    .price {
      color: rgb(38, 38, 38);
      font-size: 16px;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text1 {
      width: 533px;
      height: 105px;
      padding: 3px 2px 3px 2px;
      font-family: 'ArialMT', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      letter-spacing: normal;
      color: #000000;
      vertical-align: none;
      text-align: left;
      text-transform: none;
      background-color: #f9f9f9;
      border-color: transparent;
      resize: none;
      outline: none;
      padding: 10px;
    }

    .tabs {
      .tab {
        margin-bottom: 10px;
        display: flex;

        h5 {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
          margin-right: 6px !important;
        }

        .tab-content {
          height: 36px;
          display: flex;

          p {
            border: 1px solid rgb(242, 242, 242);
            min-width: 100px;
            height: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            color: #333;
            font-size: 15px;
            margin-right: 6px;

            cursor: pointer;

            b {
              display: none;
              font-weight: 700;
            }

            &.active {
              color: rgb(255, 236, 112);
              font-weight: 700;
              background-color: rgb(74, 74, 74);
            }

            &:hover {
              b {
                display: block;
              }

              span {
                display: none;
              }
            }
          }
        }
      }
    }

    h3.title {
      height: 30px;
      line-height: 30px;
      position: relative;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-bottom: 25px;

      &:after {
        position: absolute;
        height: 100%;
        width: 5px;
        position: absolute;
        left: -25px;
        top: 0px;
        background-color: rgba(74, 74, 74, 1);
        content: "";
      }
    }

    .title2 {
      width: 112px;
      padding: 2px 2px 2px 24px;
      font-size: 15px;
      color: #333;
      display: flex;
      height: 36px;
      align-items: center;
      margin: 0px !important;
      margin-bottom: 10px !important;
    }

    .list {
      margin-bottom: 20px;

      .list-div {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 33.3%;
          display: flex;
          height: 36px;
          align-items: center;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: calc(100% - 112px);
            padding: 2px 2px 2px 24px;
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;

            &.b {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
